<template>
	<view class="content">
		<!-- <view class="status_bar"></view> -->
		<!-- <uni-search-bar class="int" style="display: block; width: 65%; margin: 44rpx 0 10px 20px;" radius="20" clearButton="auto" cancelButton="none"
					placeholder="请输入场馆名称、地址" @confirm="search" @clear="search"></uni-search-bar> -->
		<uni-nav-bar leftWidth="0" :border="false" statusBar fixed title="" backgroundColor="#3254c3">
			<view class="my">乐度体育中心</view>
		</uni-nav-bar>
		<view style="position: relative;">
		<view class="bg"></view>
		<view style="padding: 0 20px;">
			<image style="width: 100%; margin: auto; display: block; margin-bottom: 20px;" mode="widthFix" src="/static/h1.png"></image>
			<view v-for="i in list" :key="i.id" class="ibox flex" @click="itemPage(i)">
				<view class="icon">
					<image style="width: 100px; height: 70px;" :src="base + i.stadiumImg"></image>
				</view>
				<view style="width: calc(100% - 110px);">
					<view class="theme f16">{{i.stadiumName}}</view>
					<view class="c80 flexB">
						<!-- <span class="tag">{{i.rating || '暂无评分'}}</span> -->
						<span>{{i.reservations}}人预定</span>
						<span>{{i.views}}浏览</span>
					</view>
					<div class="line" style="margin: 6px 0;"></div>
					<view class="theme f12 dot">{{i.stadiumAddr}}</view>
				</view>
			</view>
			<view v-if="!list.length && total==0" class="kong">暂无数据</view>
			<view v-else class="last">没有更多了</view>
		</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			base: this.$base,
			page: 1,
			list: [],
			total: 0
		}
	},
	onShow() {
		this.getList();
		false && uni.getStorageSync('token') && uni.getSetting({
			withSubscriptions: true,
			success: (res)=> {
				let arr = Object.values(res?.subscriptionsSetting?.itemSettings || {})
				if(!arr.length || arr.find(i=>i!="accept")) {
					uni.showModal({
						title: '提示',
						content: '是否订阅订单消息？',
						success: (res) => {
							if (res.confirm) {
								// 用户确认后，再次通过按钮触发订阅
								this.message();
							}
						}
					});
				}
			}
		});
		
	},

	methods: {
		message() {
			uni.requestSubscribeMessage({
				tmplIds: ['fZ67f0WiurAPyJluvb4HZTPXW52R6gbAsbAtIq-FBKY', 'od-dStXxYIuS5ESGo1JjURI9DySit2UwjBZAL56y_rk', '_emm4jGZ5ekVidfcLUmydDRb3kYOg1Yc02mMiC7ZZK4'],
				success (res) { },
				complete: res=>{
					console.log(123, res);
				}
			})
		},
		search(e) {			
			this.getList(e.value);
		},
		getList(v) {			
			this.$request({
				url: '/tStadium/queryListPage',
				method: 'get',
				loading: true,
				data: {
					pageNum: 1,
					pageSize: 100,
					stadiumName: v || ''
				},
			}).then(res => {
				this.list = res.data.list;
				this.total = res.data.total
			})
		},
		itemPage(i) {
			uni.navigateTo({
				url: `/pages/detail?id=${i.id}`
			});
		}
	}
}
</script>

<style lang="scss">
.content {
	margin: 0 auto;
}
.my {
	font-size: 16px;
	color: #fff;
	line-height: 44px;
	font-weight: bold;
}
.tag {
	display: inline-block;
	padding: 0px 8px;
	background: $theme;
	color: #fff;
	font-size: 12px;
	border-radius: 10px;
}
.boxC {
	width: 90%;
	margin: auto;
}

.ii {
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	margin-top: 20px;
}

.icon {
	width: 100px;
	height: 70px;
	margin-right: 10px;
	border-radius: 4px;
	overflow: hidden;
	background: #8192e4;
}

.bg {
	width: 100%;
	position: absolute;
	top: 0;
	height: 30vh;
	background: $theme;
	border-radius: 0 0 20px 20px;
	z-index: -1;
}

.title {
	color: #fff;
}
</style>